<template>
	<view>
		<uni-popup ref="popup" background-color="#fff" :is-mask-click="processLoad.isMaskClick" :mask-click="processLoad.isMaskClick">
			<view class="popup-content">
				<view class="header">{{params.title}}</view>
				<view class="main">
					<slot name="main">
						<view class="content-box" v-if="!processLoad.isHtml" :style="processLoad.contentStyle">
							{{params.content}}
						</view>
						<rich-text v-else class="content-box" :style="processLoad.contentStyle"  :nodes="params.content"></rich-text>
					</slot>
				</view>
				<slot name="footer">
					<view class="footer">
						<view v-if="processLoad.showCancel" class="confirm-btn1 cancel" @click="close" type="primary">取消</view>
						<button :loading="confirmLoading" class="confirm-btn1" @click="confirm" type="primary">{{processLoad.confirmMsg}}</button>
					</view>
				</slot>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref,computed } from 'vue';
	
	const popup = ref()	
	const confirmLoading = ref(false)
	const params = ref({})

	const processLoad = computed(() => {
		const { 
			isHtml=false, // 是否为html
			showCancel=true, // 是否显示取消按钮
			isMaskClick=false, //点击遮罩层是否关闭弹窗
			isLoading=false, // 确认按钮是否加loading
			confirmMsg='确定', // 确认按钮的文字
			close=()=>{}, // 弹窗关闭回调
		    confirm=()=>{}, // 弹窗确认回调
			contentStyle // content样式
			 } = params.value.load || {}
		
		return {
			isHtml,
			showCancel,
			isMaskClick,
			isLoading,
			confirmMsg,
			close,
			confirm,
			contentStyle
		}
	})
	
	const setParams = (row) => {
		params.value = row
	}
	
	const close = () => {
		processLoad.value.close()
		popup.value.close()
	}
	
	const confirm = async () => {
		if (processLoad.value.isLoading) {
			confirmLoading.value = true
			try {
				await processLoad.value.confirm()
				confirmLoading.value = false
				popup.value.close()
			} catch(err) {
				confirmLoading.value = false
				popup.value.close()
			}
		} else {
			popup.value.close()
			processLoad.value.confirm()
		}
	}
	
	defineExpose({
		popup,
		setParams
	})
</script>

<style lang="scss" scoped>
	:deep(.uni-popup__wrapper) {
		border-radius: 16rpx;
		overflow: hidden;
	}
	.popup-content {
	  width: 668rpx;
	  .header {
		  width: 100%;
		  height: 90rpx;
		  line-height: 90rpx;
		  text-align: center;
		  color: #4679f0;
		  font-size: 35rpx;
		  background-color: #eff3ff;
	  }
	  .main {
		  width: 100%;
		  max-height: 800rpx;
		  margin-bottom: 20rpx;
		  padding: 22rpx;
		  overflow-y: auto;
		  .content-box {
			  margin-top: 40rpx;
			  text-align: center;
		  }
	  }
	}
	.footer {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-bottom: 20rpx;
		.confirm-btn1 {
			width: 260rpx;
			height: 80rpx;
			background: #4679F0;
			border-radius: 16rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
		.cancel {
			border: 1px solid #e8e8e8;
			background: none !important;
			color:#333333;
		}
	}
</style>